<template>
    <div>
      <div class="sub-name name-box" id="low-name"><span>产研专家</span></div>
      <ul class="team content">
        <li v-for="item in experts" :key="item.id">
          <div class="expert-img">
           <img :src="item.img" alt="">
          </div>
         <div class="expert-info">
            <p class="expert-name">{{item.title}}</p>
            <div class="expert-desc" v-html="item.content">

            </div>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
  export default {
    name: 'experts01',
    async asyncData({$axios}){
      const experts = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_ptzj?type=1');
      return {experts}
    }
  }
</script>

<style>
  .team{
    width: 100%;
  }
  .team li{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding:0.2rem 0;
    border-bottom:1px solid #dededc;
  }
  .team .expert-img{
    width: 1.68rem;
    height:1.68rem;
    border-radius: 50%;
  }
  .team .expert-img img{
    width: 100%;
    margin: 0;
  }
  .team .expert-info{
    flex:1;
    box-sizing: border-box;
    padding-left: 0.56rem;
  }
  .expert-name{
    font-size: 0.22rem;
  }
  .team .expert-desc p{
    line-height: 0.28rem;
    margin: 0;
  }
</style>
